<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Selector 2</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// 群组选择器
				$('div, p, strong').css('color', 'red');
				$('#div1, .myP').css('color', 'blue');
				
				// 后代选择器, 后代并不限于直接后代 $('ul a').css('color', 'green'); 
				$('ul li a').css('color', 'green');
				
				// 通配符选择器, 尽量用在局部环境内
				$('ul li *').css('color', 'maroon'); // 选择ul->li->下面的所有元素
				
				// 混合选择器
				$('div.c1').css('font-size', '50px');// c1从DIV中选择
				
				// 多class选择, 同一个DOM节点有多个class
				$('.c2.c3').css('font-weight', 'bold');
			});	
		</script>
		</head>
	<body>
		<div id="div1">div1</div>
		<div class="myDiv">div2</div>
		<div>div3</div>
		
		<p id="p1">p1</p>
		<p class="myP">p2</p>
		<p class="myP">p3</p>
		
		<strong>s1</strong>
		<strong>s2</strong>
		<strong>s3</strong>
		
		<hr/>

		<ul>
			<li><a href="#">Page One</a></li>
			<li><a href="#">Page Two</a></li>
			<li><a href="#">Page Three</a></li>
		</ul>
		
		<a href="#">Page Four</a><br/>
		<a href="#">Page Five</a>
		
		<hr/>

		<div class="c1">Div</div>
		<p class="c1">p</p>
		
		<hr/>
		
		<div class="c2 c3">Div</div>
	</body>
</html>